import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex } from 'antd';
import { useNavigate } from 'react-router-dom'

const App: React.FC = () => {
    const navigate = useNavigate();

    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
        navigate('/login')
    };

    return (
        <Form
            name="login"
            initialValues={{ remember: true }}
            style={{ maxWidth: 360 }}
            onFinish={onFinish}
        >
            <Form.Item
                name="username"
                rules={[
                    { required: true, message: '请输入正确的QQ邮箱号!' },
                    { pattern: /^\d{11}.qq+@$/, message: '请输入正确邮箱号' }
                ]
                }
            >
                <Input prefix={<UserOutlined />} placeholder="邮箱" />
            </Form.Item>
            <Form.Item
                label="Password"
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
            >
                <Input.Password />
            </Form.Item>
            <Form.Item
                label="Password"
                name="password"
                rules={[{ required: true, message: '请再次确认密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item>
                <Button block type="primary" htmlType="submit">
                    Log in
                </Button>
                or <a href="">Register now!</a>
            </Form.Item>
        </Form>
    );
};

export default App;